<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>朋友圈</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style:  none;
        }
        textarea{
            width: 275px;
            resize: none;
            margin: 0px auto;
            display: block;
            outline: none;
            height: 60px;
            border: none;
        }
        #box{
            width: 250px;
            margin: 0px auto;
        }
        #box li{
            margin: 20px -14px;
            border: 1px solid rebeccapurple;
            position: relative;
            padding:8px;
        }
        .del{
            position: absolute;
            right: -10px;
            top:-10px;
            cursor: pointer;
        }
        button{
            width: 84px;
            background: rgb(20, 202, 20);
            border: none;
            display: block;
            margin: 20px auto;
            line-height: 40px;
            color:white;
            cursor: pointer;
            /* float: right; */
        }
        .boxs{
            width: 370px;
            height: 80px;
            margin: 0px auto;
            /* margin-bottom: 10px; */
            position: relative;
        }
        #btn{
            float: right;
            border-radius: 3px 3px 3px 3px;
        }
        .boxs p{
            width: 45px;
            height: 28px;
            
        }
        .we{
            width: 80px;
            height: 45px;
            position: absolute;
            left: 38px;
            top: 30px;
            cursor: pointer;

        }
        .cs{
            width:317px;
            height: 60px;
            margin-top: 10px;
            margin: 0px auto;
        }
        .boxs p{
            position: absolute;
            width: 100px;
            left: 155px;
            top: 30px;
        }
        .remind{
            margin-top: 5px;
            overflow: hidden;
           
        }
        .remind li{
            width: 300px;
            height: 41px;
            border-top: 1px solid #ccc;
            margin: 0px auto;
            cursor: pointer;
        }
        .glyphicon{
            margin-top: 10px;
            float: left;
        }
        .remind p{
            text-align: center;
            width: 100px;
            margin-top: 8px;
            /* float: left; */
            display:inline-block;
        }
        .right{
            float: right;
            width: 20px;
            height: 40px;
            text-align: right;
            font-size: 20px;
            display:block;
            color: #ccc;
            line-height: 41px;
            margin-right: 15px;
            
        }
        .lin{
            float: right;
            width: 60px;
            height: 30px;
            text-align: right;
            line-height: 41px;
        }
    </style>
</head>
<body>
        <div class="boxs">
            <div class="we">取消</div>
            <p><strong>发表文字</strong></p>
            <button id="btn">发表</button>
        </div><div class="cs">
    <textarea name="" id="txt" cols="30" rows="10"></textarea></div>
    <ul class="remind">
        <li><span class="glyphicon glyphicon-map-marker"></span>
            <p>所在位置</p>
            <div class="right">&gt</div>
        </li>
        <li><span class="glyphicon">@</span>
            <p>提醒谁看</p>
            <div class="right">&gt</div>
        </li>
        <li><span class="glyphicon glyphicon-user"></span>
            <p>谁可以看</p>
            <div class="right">&gt</div>
            <div class="lin">公开</div>
        </li>
        <li></li>
    </ul>
    <ul id="box">
        <li>儿童节快乐
            <p>2021.06.01</p>
            <span class="del" onclick="del(this)">X</span>
        </li>
        <li>每天都要开心
            <p>2021.06.01</p>
            <span class="del" onclick="del(this)">X</span>
        </li>
    </ul>
    <script>
        var btn=document.getElementById('btn');
        var txt=document.getElementById('txt');
        var box=document.getElementById('box');
        var year=new Date().getFullYear()
        var month=new Date().getMonth()+1
        var date=new Date().getDate()
        btn.onclick=function(){
            var val=txt.value;
            var tag=document.createElement('li');
            tag.innerHTML=`${val}
            <p>${year}-${month}-${date}</p>
            <span class="del" onclick="del(this)">X</span>`
            box.appendChild(tag);
        }
        function del(a){
            a.parentNode.parentNode.removeChild(a.parentNode)
        }
    </script>
</body>
</html>